<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap-3.4.1/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./styles/login.css">
</head>

<body>
  <header>
    <div class="center">
      <img src="./img/tmall.png" alt="">
    </div>
  </header>
  <main>
    <div class="center">
      <div class="box">
        <div class="login" id="con3">
          <div class="img">
            <a href="#con4">
              <img src="./img/login.png" alt="" style="width: 52px; height:52px;">
            </a>
          </div>
          <div class="text">扫码登录更安全</div>
          <div class="cen">
            <div class="tab">
              <ul>
                <li><a href="#con1">密码登录</a></li>
                <li><a href="#con2">手机登录</a></li>
              </ul>
            </div>
            <div class="content clear">
              <div id="con1">
                <div class="page1">
                  <span><img src="./img/username.png" alt="" style="width: 40px; height:40px;"></span>
                  <input type="username" placeholder="账户名/邮箱/手机号" class="username">
                </div>
                <div class="page2">
                  <span><img src="./img/password.png" alt="" style="width: 40px; height:40px;"></span>
                  <input type="password" placeholder="请输入登录密码" class="password">
                </div>
                <button type="submit">登录</button>
                <div class="page3">
                  <a href="#">
                    <img src="./img/weibo.png" alt="" style="width: 16px; height:16px;">
                    <span>微博登录</span>
                  </a>
                  <a href="#">
                    <img src="./img/zfb.png" alt="" style="width: 16px; height:16px;">
                    <span>支付宝登录</span>
                  </a>
                </div>
                <div class="page4">
                  <a href="#">忘记密码</a>
                  <a href="#">忘记账号名</a>
                  <a href="#">免费注册</a>
                </div>
              </div>
              <div id="con2">
                <div class="page1">
                  <span><img src="./img/username.png" alt="" style="width: 40px; height:40px;"></span>
                  <select name="" id="select" style="width: 60px;">
                    <option value="">+86 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 中国大陆</option>
                    <option value="">中国香港 +852</option>
                    <option value="">中国澳门 +853</option>
                    <option value="">中国台湾 +886</option>
                    <option value="">韩国 +82</option>
                    <option value="">日本 +81</option>
                    <option value="">中国香港 +852</option>
                    <option value="">中国香港 +852</option>
                    <option value="">中国香港 +852</option>
                    <option value="">中国香港 +852</option>
                    <option value="">中国香港 +852</option>
                    <option value="">中国香港 +852</option>
                  </select>
                  <input type="username" placeholder="请输入手机号" class="username">
                </div>
                <div class="page2">
                  <span><img src="./img/password.png" alt="" style="width: 40px; height:40px;"></span>
                  <input type="password" placeholder="请输入验证码" class="password">
                  <a href="#" style="width: 100px; height: 39px; line-height:40px;">获取验证码</a>
                </div>
                <button type="submit">登录</button>
                <div class="page3">
                  <a href="#">
                    <img src="./img/weibo.png" alt="" style="width: 16px; height:16px;">
                    <span>微博登录</span>
                  </a>
                  <a href="#">
                    <img src="./img/zfb.png" alt="" style="width: 16px; height:16px;">
                    <span>支付宝登录</span>
                  </a>
                </div>
                <a href="#">免费注册</a>
              </div>
            </div>
          </div>
        </div>
        <div class="login2" id="con4">
          <div class="img">
            <a href="#con3">
              <img src="./img/login2.png" alt="" style="width: 52px; height:52px;">
            </a>
          </div>
          <div class="text1">
            手机扫码，安全登录
          </div>
          <div class="img2">
            <img src="./img/login3.png" alt="" style="width:130px;">
          </div>
          <div class="text2">
            <span class="
            glyphicon glyphicon-menu-hamburger" style="font-size:30px; color: orange;"></span>
            <p>
              <span>打开</span>
              <a href="#">淘宝App</a>
               | 
              <a href="#">天猫App</a>
              <br>
              <span>扫一扫登录</span>
            </p>
          </div>
          <div class="text3">
            <a href="#">密码登录</a>
            <a href="#">免费注册</a>
          </div>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <div class="center">
      <ul>
        <li><a href="#">阿里巴巴集团</a></li>
        <li><a href="#">阿里巴巴国际站</a></li>
        <li><a href="#">阿里巴巴中国站</a></li>
        <li><a href="#">全球速卖通</a></li>
        <li><a href="#">淘宝网</a></li>
        <li><a href="#">天猫</a></li>
        <li><a href="#">聚划算</a></li>
        <li><a href="#">一淘</a></li>
        <li><a href="#">阿里妈妈</a></li>
        <li><a href="#">阿里云计算</a></li>
        <li><a href="#">云OS</a></li>
        <li><a href="#">万网</a></li>
        <li><a href="#">支付宝</a></li>
      </ul>
      <div class="buttom">
        <div class="top">
          <a href="#">关于淘宝</a>
          <a href="#">合作伙伴</a>
          <a href="#">营销中心</a>
          <a href="#">联系淘宝</a>
          <a href="#">开放平台</a>
          <a href="#">诚征英才</a>
          <a href="#">联系我们</a>
          <a href="#">网站地图</a>
          <a href="#">法律声明及隐私权政策</a>
          <span>&copy; 2022 Taobao.com 版权所有</span>
        </div>
        <div class="under">
          <ul>
            <li>网络文化经营许可证：<a href="">文网文[2010]040号</a></li>
            <li class="text">增值电信业务经营许可证：浙B2-20080224-1</li>
            <li class="text2">信息网络传播视听节目许可证：1109364号</li>
          </ul>
        </div>
      </div>
    </div>
  </footer>
</body>

</html>
<script src="./js/jquery.min.js"></script>
<script src="./bootstrap-3.4.1/dist/js/bootstrap.min.js"></script>